<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="choosepay-box w100 flex">
		<text class="title">选择支付方式</text>
		<view class="choose-box flex w100">
			<view class="choose-item flex-row-center w100" @click="changeType(item)" v-for="(item,index) in payList"
				:key="index">
				<view class="type-left flex-row-center">
					<image :src="item.icon" class="pay-icon" mode=""></image>
					<text class="type"
						v-if="item.label==='balance'&&accountInfo">{{item.name}}(￥{{accountInfo.available_balance}})</text>
					<text class="type" v-else>{{item.name}}</text>
				</view>
				<template>
					<view class="choose-box-active flex-center" v-if="chooseId===item.label">
						<up-icon name="checkbox-mark" color="#FFF" size="28rpx"></up-icon>
					</view>
					<view class="choose-box" v-else></view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		userInfoStore
	} from '@/stores/user.js';
	const userStore = userInfoStore();
	const props = defineProps({
		payType: {
			default: 'wechat'
		}
	});
	const emit = defineEmits(['changePayType']);
	const payList = [{
			name: '微信支付',
			icon: '/static/pay/wechat-pay.png',
			label: 'wechat'
		},
		{
			name: '余额支付',
			icon: '/static/pay/balance-icon.png',
			label: 'balance'
		},
	];
	onMounted(() => {
		userStore.getAccount();
	})
	const accountInfo = ref(computed(() => userStore.accountInfo));
	const chooseId = ref(props.payType);
	const changeType = (item) => {
		chooseId.value = item.label;
		emit('changePayType', item.label);
	};
	const changeAccount = (account) => {//更新余额
		
	};
</script>

<style lang="scss" scoped>
	.choosepay-box {
		width: 100%;
		flex-direction: column;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: $name-color;
			margin: 32rpx 0;
			align-self: flex-start;
		}

		.choose-box {
			flex-direction: column;

			.choose-item {
				justify-content: space-between;
				padding: 24rpx;
				border-bottom: 2rpx solid #2B2E31;
			}

			.type-left {
				.pay-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 24rpx;
				}
			}

			.type {
				font-size: 28rpx;
				font-weight: bold;
				color: $name-color;
			}

			.choose-box-active {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				box-sizing: border-box;
				background-color: $radios-color;
			}

			.choose-box {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				box-sizing: border-box;
				border: 1rpx solid $no-radios-color;
			}
		}
	}
</style>